<template>
  <div>
    <el-container>
      <el-container>
        <el-aside width="200px" style="height:100%; background-color: rgb(238, 241, 246)">
          <el-menu style="background-color: rgb(238, 241, 246)" router>
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-s-home"></i>Basic</template>
              <el-menu-item-group>
                <el-menu-item index="/ManagerLayout">Layout布局</el-menu-item>
                <el-menu-item index="/OftenContainer">Container布局容器</el-menu-item>
                <el-menu-item index="1-3">Color色彩</el-menu-item>
                <el-menu-item index="1-4">Border边框</el-menu-item>
                <el-menu-item index="1-5">Icon图标</el-menu-item>
                <el-menu-item index="/ButtonComponents">Button按钮</el-menu-item>
                <el-menu-item index="/TextLink">Link文字链接</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-menu"></i>Form</template>
              <el-menu-item-group>
                <el-menu-item index="/RadioComponent">Radio单选框</el-menu-item>
                <el-menu-item index="/CheckboxComponent">CheckBox多选框</el-menu-item>
                <el-menu-item index="/InputComponent">Input输入框</el-menu-item>
                <el-menu-item index="/InputNumberComponent">InputNumber计数器</el-menu-item>
                <el-menu-item index="/SelectComponent">Select选择器</el-menu-item>
                <el-menu-item index="2-6">Cascader级联选择器</el-menu-item>
                <el-menu-item index="2-7">Switch开关</el-menu-item>
                <el-menu-item index="2-8">Slider滑块</el-menu-item>
                <el-menu-item index="2-9">TimePicker时间选择器</el-menu-item>
                <el-menu-item index="2-10">DatePicker日期选择器</el-menu-item>
                <el-menu-item index="2-11">Upload上传</el-menu-item>
                <el-menu-item index="2-12">Rate评分</el-menu-item>
                <el-menu-item index="2-13">ColorPicker选择器</el-menu-item>
                <el-menu-item index="2-14">Transfer穿梭框</el-menu-item>
                <el-menu-item index="2-15">Form表单</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-date"></i>Date</template>
              <el-menu-item-group>
                <el-menu-item index="3-1">Table表格</el-menu-item>
                <el-menu-item index="3-2">Tag标签</el-menu-item>
                <el-menu-item index="3-3">Progress进度条</el-menu-item>
                <el-menu-item index="3-4">Tree树形控件</el-menu-item>
                <el-menu-item index="3-5">Pagination分页</el-menu-item>
                <el-menu-item index="3-6">Badge标记</el-menu-item>
                <el-menu-item index="3-7">Avatar头像</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title"><i class="el-icon-chat-dot-round"></i>Notice</template>
              <el-menu-item-group>
                <el-menu-item index="4-1">Alter警告</el-menu-item>
                <el-menu-item index="4-2">Loading加载</el-menu-item>
                <el-menu-item index="4-3">Message消息提示</el-menu-item>
                <el-menu-item index="4-4">MessageBox弹框</el-menu-item>
                <el-menu-item index="4-5">Notification通知</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title"><i class="el-icon-setting"></i>Navigation</template>
              <el-menu-item-group>
                <el-menu-item index="5-1">NavMenu 导航菜单</el-menu-item>
                <el-menu-item index="5-2">Tabs 标签页</el-menu-item>
                <el-menu-item index="5-3">Breadcrumb 面包屑</el-menu-item>
                <el-menu-item index="5-4">PageHeader 页头</el-menu-item>
                <el-menu-item index="5-5">Dropdown 下拉菜单</el-menu-item>
                <el-menu-item index="5-6">Steps 步骤条</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title"><i class="el-icon-receiving"></i>Others</template>
              <el-menu-item-group>
                <el-menu-item index="6-1">Dialog 对话框</el-menu-item>
                <el-menu-item index="6-2">Tooltip 文字提示</el-menu-item>
                <el-menu-item index="6-3">Popover 弹出框</el-menu-item>
                <el-menu-item index="6-4">Card 卡片</el-menu-item>
                <el-menu-item index="6-5">Carousel 走马灯</el-menu-item>
                <el-menu-item index="6-6">Collapse 折叠面板</el-menu-item>
                <el-menu-item index="6-7">Timeline 时间线</el-menu-item>
                <el-menu-item index="6-8">Divider 分割线</el-menu-item>
                <el-menu-item index="6-9">Calendar 日历</el-menu-item>
                <el-menu-item index="6-10">Image 图片</el-menu-item>
                <el-menu-item index="6-11">Backtop 回到顶部</el-menu-item>
                <el-menu-item index="6-12">InfiniteScroll 无限滚动</el-menu-item>
                <el-menu-item index="6-13">Drawer 抽屉</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  body {
    height: 100%;
  }
.header {
  background-color: rgb(238, 241, 246);
  text-align: center;
  font-size: large;
}
  .header-menu {
    background-color: rgb(238, 241, 246);
  }
</style>
